<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/product.css">
    <link rel="stylesheet" href="./css/header_com.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/navigation_com.css">
    <link rel="stylesheet" href="./css/footer_com.css">
	<link rel="stylesheet" href="css/pagetion.css" />
</head>
<body>
    <!--1. the header start -->
    <header>
        <div class="header wrapper">
            <p>ベッドと美しい生活    美好宠物生活</p>
            <h1>pidan</h1>
            <input type="text" class="iconfont" placeholder="&#xe63c">
        </div>
    </header>
    <!--1. the header end -->

    <!--2. the slider start -->
    <div class="slider">
        <img src="./img/images2/banner.png" alt="">
    </div>
    <!--2. the slider end -->

    <!--3. the navigation start -->
    <div class="navigation wrapper">
        <ul>
            <li><a href="./index.html" >首页</a></li>
            <li><a href="./product.html" class="on">产品中心</a></li>
            <li><a href="./brand.html">品牌故事</a></li>
            <li><a href="./news.html">新闻中心</a></li>
            <li><a href="./special.html">special特别合作</a></li>
            <li><a href="./contract.html">联系方式</a></li>
        </ul>
    </div>
    <!--3. the navgation end -->

    <!--4. the product start  -->
    <div class="product wrapper">
        <div class="left">
            <h3>产品中心</h3>
            <p class="on">猫猫用</p>
            <p>狗狗用</p>
        </div>
        <ul class="right">
                <li>
                    <img src="./img/images2/cat1.png" alt=""><img src="./img/images2/cat2.png" alt=""><img src="./img/images2/cat3.png" alt=""><img src="./img/images2/cat4.png" alt="">
                </li>
                <li>
                    <img src="./img/images2/cat5.png" alt=""><img src="./img/images2/cat6.png" alt=""><img src="./img/images2/cat7.png" alt=""><img src="./img/images2/cat8.png" alt="">
                </li>
                <li>
                    <img src="./img/images2/cat9.png" alt=""><img src="./img/images2/cat10.png" alt=""><img src="./img/images2/cat11.png" alt="">
                </li>
        </ul>
        <ol class="pagetion">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <!--4. the product end  -->

    <!-- the footer start -->
    <div class="footer wrapper">
        <p>沪ICP备12385496-3 sdhfnhrj©2020 Danke Co</p>
        <p>服务热线：+86 400-920-0674</p>
    </div>
    <!-- the footer end -->
</body>
</html>